<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>字段合并</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">字段合并！</h1>
        <p class="lead">数据处理的第二个步骤，合并源数据的多个字段为单一目标字段。</p>
        <hr class="my-4">
        <p class="lead">请选择需要进行合并工作的数据文件</p>
        <div class="input-group">
            <select class="custom-select">
                <option selected>请选择数据...</option>
                <option value="1">One.txt</option>
                <option value="2">Two.txt</option>
                <option value="3">Three.txt</option>
            </select>
            <div class="input-group-append">
                <button class="btn btn-success" type="button">选择数据文件</button>
                <button class="btn btn-danger" type="button">跳过此部分工作</button>
            </div>
        </div>
        <div class="card my-4">
            <div class="card-body">
                <h5 class="card-title">字段待选区</h5>
                <div class="border rounded" style="padding: 3rem">
                    <button class="btn btn-success" type="button">张三</button>
                    <button class="btn btn-success" type="button">江苏省</button>
                    <button class="btn btn-success" type="button">南京市</button>
                    <button class="btn btn-success" type="button">苏州大学</button>
                    <button class="btn btn-success" type="button">计算机科学与技术学院</button>
                    <button class="btn btn-success" type="button">软件工程</button>
                    <button class="btn btn-success" type="button">硕士研究生</button>
                    <button class="btn btn-success" type="button">2015级</button>
                    <button class="btn btn-success" type="button">20155227888@stu.suda.edu.cn</button>
                    <button class="btn btn-success" type="button">18888888888</button>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">字段合并区</h5>
                <hr>
                <form>
                    <div class="form-group row">
                        <div class="col-4 offset-1">
                            <input type="text" class="form-control is-valid" placeholder="字段选择" required>
                        </div>
                        <div class="col-2">
                            <p class="lead text-center">
                                <span class="oi oi-arrow-thick-right align-middle"></span>
                            </p>
                        </div>
                        <div class="col-4">
                            <input type="text" class="form-control is-valid" name="password" placeholder="合并结果" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-1">
                            <button class="btn btn-outline-success" type="button"><span class="oi oi-plus"></span> 新建合并</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="btn-group" role="group" aria-label="Basic example">
            <button class="btn btn-secondary" type="button">重新合并字段</button>
            <button class="btn btn-danger" type="button">提交字段合并结果</button>
        </div>
    </div>
</div>
</body>
</html>